<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa; /* 浅灰色背景 */
        }
        .page-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .page-header h1 {
            font-size: 2rem;
            color: #343a40;
        }
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应网格布局 */
            gap: 20px; /* 商品之间的间距 */
        }
        .product-item {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        }
        .product-item img {
            width: 100%;
            height: 150px; /* 固定图片高度 */
            object-fit: cover; /* 图片比例保持 */
        }
        .product-item-body {
            padding: 15px;
        }
        .product-item-name {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 8px;
            color: #343a40;
        }
        .product-item-price {
            font-size: 1rem;
            color: #007bff;
            margin-bottom: 15px;
        }
        .btn-add-to-cart {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
        }
        .btn-add-to-cart:hover {
            background-color: #0056b3;
        }
        .view-cart-btn {
            display: block;
            margin: 30px auto;
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        .view-cart-btn:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1>商品列表</h1>
            <p class="text-muted">以下是我们为您精选的商品，快来看看吧！</p>
        </div>

        <!-- 商品列表 -->
        <div class="product-list">
            {% for product in products %}
                <div class="product-item">
                    <!-- 商品图片 -->
                    <img src="{{ url_for('static', filename=product['image']) }}" alt="{{ product['name'] }}">
                    <!-- 商品名称和价格 -->
                    <div class="product-item-body">
                        <span class="product-item-name">{{ product['name'] }}</span>
                        <span class="product-item-price">{{ product['price'] }} 元</span>
                        <!-- 加入购物车按钮 -->
                        <button type="submit" class="btn btn-add-to-cart" data-id="{{ product['id'] }}">
                            加入购物车
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- 查看购物车按钮 -->
        <a href="{{ url_for('home.view_cart') }}">
            <button class="view-cart-btn">查看购物车</button>
        </a>
    </div>

    <!-- 引入 Bootstrap JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.btn-add-to-cart').on('click', function(e) {
                var url = '/add_to_cart/' + $(this).attr('data-id');
                console.log(url)
    
                $.ajax({
                    url: url,  // 目标 URL
                    type: 'POST',
                    data: {},
                    success: function(response) {
                        // 成功回调函数
                        if (response.success) {
                            alert('商品已成功添加到购物车!');
                            // 这里可以更新购物车图标等信息，具体根据需求
                        } else {
                            alert('添加失败，请稍后再试');
                        }
                    },
                    error: function(xhr, status, error) {
                        // 错误回调函数
                        alert('发生了错误，请稍后再试');
                    }
                });
            });
        });
    </script>
</body>
</html>